<template>
  <div>父组件</div>
  <button @click="flag = !flag" style="margin-bottom: 20px">切换案例</button>

  <div v-if="flag">
    <div>props、自定义事件Emit、defineExpose案例</div>
    <Son :name="name" ref="sonDefineExpose" @on-click="decidate" />
    <!-- 实现瀑布流 -->
    <WaterFall :waterFallList="waterFallList" />, inject
  </div>
  <div v-else>
    <div>依赖注入Provide / Inject</div>
    <div class="inject">
      使用inject获取provide注射的值，其通过background-color: v-bind(fatherColor);去设置颜色
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount, reactive } from 'vue';
import Son from './Son.vue';
// 用于切换案例
const flag = ref<boolean>(true);

// 父传子
const name = ref<string>('父传子');

// 子传父：自定义事件
const decidate = (sonName: any) => {
  console.log(sonName);
};

// 子传父：defineExpose
const sonDefineExpose = ref<InstanceType<typeof Son>>(); // 此处变量名需要和标签中ref属性值相同
// sonDefineExpose.component?.exposed
console.log('setup', sonDefineExpose.value?.name); // setup中无法取到该值，所以返回undefined
onBeforeMount(() => {
  console.log('onBeforeMount', sonDefineExpose.value?.name); // undefined
}),
  onMounted(() => {
    console.log('onMounted', sonDefineExpose.value?.name);
  });

/**
 * 组件 WaterFall 实现父传子瀑布流
 */
import WaterFall from './WaterFall.vue';
const waterFallList = reactive<object[]>([
  {
    height: 300,
    background: 'red'
  },
  {
    height: 400,
    background: 'pink'
  },
  {
    height: 500,
    background: 'blue'
  },
  {
    height: 200,
    background: 'green'
  },
  {
    height: 300,
    background: 'gray'
  },
  {
    height: 400,
    background: '#CC00FF'
  },
  {
    height: 200,
    background: 'black'
  },
  {
    height: 100,
    background: '#996666'
  },
  {
    height: 500,
    background: 'skyblue'
  },
  {
    height: 300,
    background: '#993366'
  },
  {
    height: 100,
    background: '#33FF33'
  },
  {
    height: 400,
    background: 'skyblue'
  },
  {
    height: 200,
    background: '#6633CC'
  },
  {
    height: 300,
    background: '#666699'
  },
  {
    height: 300,
    background: '#66CCFF'
  },
  {
    height: 300,
    background: 'skyblue'
  },
  {
    height: 200,
    background: '#CC3366'
  },
  {
    height: 200,
    background: '#CC9966'
  },
  {
    height: 200,
    background: '#FF00FF'
  },
  {
    height: 500,
    background: '#990000'
  },
  {
    height: 400,
    background: 'red'
  },
  {
    height: 100,
    background: '#999966'
  },
  {
    height: 200,
    background: '#CCCC66'
  },
  {
    height: 300,
    background: '#FF33FF'
  },
  {
    height: 400,
    background: '#FFFF66'
  },
  {
    height: 200,
    background: 'red'
  },
  {
    height: 100,
    background: 'skyblue'
  },
  {
    height: 200,
    background: '#33CC00'
  },
  {
    height: 300,
    background: '#330033'
  },
  {
    height: 100,
    background: '#0066CC'
  },
  {
    height: 200,
    background: 'skyblue'
  },
  {
    height: 100,
    background: '#006666'
  },
  {
    height: 200,
    background: 'yellow'
  },
  {
    height: 300,
    background: 'yellow'
  },
  {
    height: 100,
    background: '#33CCFF'
  },
  {
    height: 400,
    background: 'yellow'
  },
  {
    height: 400,
    background: 'yellow'
  },
  {
    height: 200,
    background: '#33FF00'
  },
  {
    height: 300,
    background: 'yellow'
  },
  {
    height: 100,
    background: 'green'
  }
]);

// 依赖注入Provide / Inject
import { inject } from 'vue';
const fatherColor: any = inject('fatherColor', '默认值');
console.log('fatherColor', fatherColor.value);
</script>

<style lang="scss" scoped>
#app,
html,
body {
  height: 100%;
}

* {
  padding: 0;
  margin: 0;
}

.inject {
  width: 300px;
  height: 100px;
  background-color: v-bind(fatherColor);
}
</style>
